﻿<!DOCTYPE html>
<html lang="en">

<head>
  <base href="/portal">
  <meta charset="utf-8" />
  <link rel="apple-touch-icon" sizes="76x76" href="~/lib/now-ui-kit-pro-v1.2.2/mix-app/assets/img/apple-icon.png">
  <link rel="icon"
    href="@(MixService.GetConfig<string>("Favicon") ?? "/mix-app/css/portal/img/mixcore-logo-green-16x16.png")">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>@ViewData["Title"] - mixcore</title>
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
    name='viewport' />
  <!--     Fonts and icons     -->
  @* <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" /> *@
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

  <environment names="Development,Staging,Production">
    <!-- CSS Files -->
    <style>
      html,
      body {
        height: 100%;
      }
      body {
        display: flex;
        align-items: center;
        padding-top: 40px;
        padding-bottom: 40px;
      }

      body::before {
        content: "";
        background: black;
        opacity: 0.8;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: fixed;
        z-index: -1;
        background-image: url("/mix-app/img/background.jpg");
        background-repeat: no-repeat;
        background-position: right top;
        background-attachment: fixed;
        background-size: cover;
      }

      body::after {
        content: "";
        background: black;
        opacity: 0.5;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: fixed;
        z-index: -1;
        /* background-image: url("/mix-app/img/background.jpg"); */
        background-repeat: no-repeat;
        background-position: right top;
        background-attachment: fixed;
        background-size: cover;
        /* Add the blur effect */
        filter: blur(8px);
        -webkit-filter: blur(8px);
      }

      hr {
        border: none !important;
      }

      .container {
        grid-template-columns: 40px 50px auto 50px 40px;
        grid-template-rows: 25% 100px auto;
      }

      .form-signin {
        width: 100%;
        max-width: 430px;
        padding: 15px;
        margin: auto auto;
      }
    </style>
  </environment>
  <link href="~/mix-app/css/app-vendor.min.css" rel="stylesheet" />
  <link href="~/mix-app/css/shared.min.css" rel="stylesheet" />

  <script src="~/mix-app/js/particles/particles.min.js"></script>
</head>
<!--
<body class="login-page app-security app-init" ng-app="MixPortal" style="background-image: url('/mix-app/assets/img/bgs/bg.png');background-position: center;background-repeat: no-repeat;background-size: cover;">
   <mix-loader ng-show="isBusy"></mix-loader>
     <div class="container init-pages">

        <div class="card o-hidden border-0 shadow-lg">
            <div class="card-body p-0">
                <div class="progress" style="height: 2px;">
                        <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                <div class="row no-gutters">
                    <div class="col-lg-8">
                        <div class="left-coloumn">
                        </div>
                    </div>
                    <div class="col-lg-4 d-none d-lg-block bg-register-image">
                    </div>
                </div>
            </div>
        </div>
    </div> -->

<body class="" ng-app="MixPortal">
  <div id="particles-js" class="position-absolute w-100 h-100"></div>
  <mix-loader ng-show="isBusy"></mix-loader>

  <div class="container">
    <div class="card form-signin">
      @RenderBody()
    </div>
  </div>

  <environment names="Development">
  </environment>
  <script src="~/mix-app/js/framework.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
    crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.2.0/js/bootstrap-notify.min.js"></script>

  <script src="~/mix-app/js/app-security.min.js"></script>
  <script src="~/mix-app/js/app-shared.min.js"></script>

  @RenderSection("Scripts", required: false)

  <!-- Modal -->
  <div class="modal fade" id="termAndCondition" tabindex="-1" role="dialog" aria-labelledby="termAndConditionTitle"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="termAndConditionTitle">Terms and Conditions.</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur
          et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
        </div>
        <div class="modal-footer justify-content-center">
          <button type="button" class="btn btn-primary" data-dismiss="modal">I have read and understand!</button>
        </div>
      </div>
    </div>
  </div>

  <script>particlesJS('particles-js',
      {
        "particles": {
          "number": {
            "value": 50,
            "density": {
              "enable": true,
              "value_area": 800
            }
          },
          "color": {
            "value": "#ffffff"
          },
          "shape": {
            "type": "circle",
            "stroke": {
              "width": 0,
              "color": "#000000"
            },
            "polygon": {
              "nb_sides": 5
            },
            "image": {
              "src": "img/github.svg",
              "width": 100,
              "height": 100
            }
          },
          "opacity": {
            "value": 0.2,
            "random": false,
            "anim": {
              "enable": false,
              "speed": 1,
              "opacity_min": 0.1,
              "sync": false
            }
          },
          "size": {
            "value": 3,
            "random": true,
            "anim": {
              "enable": false,
              "speed": 40,
              "size_min": 0.1,
              "sync": false
            }
          },
          "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#ffffff",
            "opacity": 0.2,
            "width": 1
          },
          "move": {
            "enable": true,
            "speed": 3,
            "direction": "none",
            "random": false,
            "straight": false,
            "out_mode": "out",
            "bounce": false,
            "attract": {
              "enable": false,
              "rotateX": 600,
              "rotateY": 1200
            }
          }
        },
        "interactivity": {
          "detect_on": "window",
          "events": {
            "onhover": {
              "enable": true,
              "mode": "grab"
            },
            "onclick": {
              "enable": true,
              "mode": "push"
            },
            "resize": true
          },
          "modes": {
            "grab": {
              "distance": 200,
              "line_linked": {
                "opacity": 0.2
              }
            },
            "bubble": {
              "distance": 400,
              "size": 40,
              "duration": 2,
              "opacity": 8,
              "speed": 3
            },
            "repulse": {
              "distance": 200,
              "duration": 0.4
            },
            "push": {
              "particles_nb": 4
            },
            "remove": {
              "particles_nb": 2
            }
          }
        },
        "retina_detect": true
      });</script>
</body>

</html>